import React from 'react';
import { connect } from 'dva';
import { Modal, Tabs, WhiteSpace, Grid, Toast, Icon, Popup } from 'antd-mobile';
import moment from 'moment';
import _ from 'lodash';
import styles from './TimeSelectModal.less';
import classnames from 'classnames';
const TabPane = Tabs.TabPane;


class TimeSelectModal extends React.Component {


  constructor(props) {
    super(props);

    this.state = {
      selectTab: '',
    };
  }


  handleTabClick = (key) => {
    this.setState({ selectTab: key });
  }

  onChange = (key) => {
    this.setState({ selectTab: key });
  }

  renderContent = tab =>
    (<div>
      <p>Content of {tab.title}</p>
    </div>);


  render() {
    const { visiable, dataSource } = this.props;
    const thiz = this;

    if (!dataSource) return (<div />);

    const { timesetting = [], aheadDays = 0, applyTimes = [], isCurDayCanApply = true } = dataSource;
    const tabs = [];
    for (let i = 0; i <= aheadDays; i++) {
      const d = isCurDayCanApply ? i : i + 1;
      const m = moment().add(d, 'day');
      const title = m.format('MM-DD');
      const date = m.format('YYYY-MM-DD');
      tabs.push({ title, date, timesetting });
    }

    const handleGridClick = (ele, defaultTab) => {
      const selectTab = this.state.selectTab || defaultTab;
      const num = _.get(_.find(applyTimes, { apply_time: selectTab + ' ' + ele.time }), 'num', 0);
      if (num >= ele.num) {
        Toast.info('该时间段已约满', 1);
        return;
      }

      this.props.onOk(selectTab + ' ' + ele.time);
    };

    console.log(tabs);

    return (
      <div>
        <div className={styles.title}>
        选择服务时间
        <div className={styles["close-icon"]} onClick={() => { Popup.hide(); }}>
          <Icon type="cross" size="lg" />
        </div>
        </div>
        <div>
          <Tabs defaultActiveKey={tabs[0].date} onChange={this.onChange} pageSize={5} onTabClick={this.handleTabClick} className={"yw-ct-taxw"}>
            {
              _.map(tabs, (tab) => {
                return (
                  <TabPane tab={`${tab.title}`} key={tab.date}>
                    <div className={styles["item-warpper"]}>
                      {tab.timesetting.map((item) => {
                        const num = _.get(_.find(applyTimes, { apply_time: tab.date + ' ' + item.time }), 'num', 0);
                        const text = num < item.num ? '可预约' : '约满';

                        return (
                          <div
                            className={classnames({
                              [styles["item-list"]]: true,
                              [styles.clearfix]: true,
                              [styles.disable]: num >= item.num,
                            })}
                            onClick={() => { handleGridClick(item, tab.date); }}
                          >
                            <span className={styles["item-times"]}>{item.time}</span>
                            <span className={styles["item-opt"]}>{text}</span>
                          </div>
                        );
                      })}

                    </div>
                  </TabPane>
                );
              })
            }
          </Tabs>
        </div>
      </div>
    );
  }
}

export default TimeSelectModal;
